<template>
	<view>
	<!-- 背景 start-->
		<view class="bg" :style="{background:tColor}"></view>
	<!-- 背景 end-->
	<!-- 本店小程序码 start -->
		<view class="main-store">
			<view class="t-c f36 wei pt40">分享到微信 提升店铺影响力</view>
			<view class="t-c m10"><image show-menu-by-longpress :src="fastOrderCode" style="width: 160rpx;height: 160rpx;"/></view>
			<button class="w80 mt40"
			 style="border-radius: 100rpx;"
			 :style="{background:btnColor}" 
			 @click="showImg('快餐码')"
			 >
			 <!-- open-type='share' -->
				<view class="f-c">
					<image src="../../static/wxlogo.png" style="width: 40rpx;height: 40rpx;" />
					<text class="ml10">分享到微信</text>
				</view>
			</button>
		</view>
	<!-- 本店小程序码 end -->
	<!-- 点单码 快餐码 当面付 start -->
		<view>
			<view v-for="(item,index) in QRcodes" :key="index" class="cards">
				<view style="width: 100rpx;"><image :src="item.icon" style="width: 80rpx;height: 80rpx;" /></view>
				<view style="width: 500rpx;" class="f-yc">
					<text class="f32 wei">{{item.name}}</text>
					<text class="f24 c9">{{item.text}}</text>
				</view>
				<view style="width: 100rpx;">
					<text class="check-img" :style="{background:btnColor}" @click="showImg(item.name)">查看</text>
				</view>
			</view>
		</view>
	<!-- 点单码 快餐码 当面付 end -->
	<!-- 选择图片 start -->
		<u-mask :show="show" @click="show = false">
			<view class="center">
				<image v-if="goodsShow" class="wh" show-menu-by-longpress :src="goodsCode" mode=""></image>
				<image v-else-if="dmfShow" class="wh" show-menu-by-longpress :src="dmfCode" mode=""></image>
				<image v-else-if="fastOrderShow" class="wh" show-menu-by-longpress :src="fastOrderCode" mode=""></image>
			</view>
		</u-mask>
	<!-- 选择图片 end -->
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		data(){
			return{
				show:false,
				goodsShow:false,
				dmfShow:false,
				fastOrderShow:false,
				QRcodes:[
					{
						name:'点单码',
						text:'门店点单二维码，用于用户扫码点单',
						icon:'../../static/img/QRcode/1.png'
					},
					// {
					// 	name:'快餐码',
					// 	text:'门店快餐二维码，用于用户扫码下单',
					// 	icon:'../../static/no.png'
					// },
					{
						name:'当面付',
						text:'门店自己的收银二维码，用于用户扫码付款',
						icon:'../../static/img/QRcode/3.png'
					}
				],
				goodsCode:'', //外卖码
				fastOrderCode:'',//快餐码
				dmfCode:''//当面付
			}
		},
		computed:{
			btnColor(){
				return `linear-gradient(90deg, ${utils.jjldColor(this.tColor,40)}, ${this.tColor})`
			}
		},
		created() {
			this.getCode()
		},
		methods:{
			showImg(name){
				this.goodsShow = false
				this.dmfShow = false
				this.fastOrderShow = false
				if(name==='点单码'){
					this.show = true
					this.goodsShow = true
				}else if(name === '当面付'){
					this.show = true
					this.dmfShow = true
				}else if(name === '快餐码'){
					this.show = true
					this.fastOrderShow = true
				}
			},
			async getCode(){
				try{
					let {data} = await this.util.request({
						'url': this.api.returnCode,
						data:{ident:'goods',page:'yb_wm/index/goods'} //外卖码
					})
					this.goodsCode = data
				}catch(e){
					this.util.message(e.msg, 3)
				}
				
				try{
					let {data} = await this.util.request({
						'url': this.api.returnCode,
						data:{ident:'fastOrder',page:'yb_wm/shop/ffmode/goods'} //快餐码
					})
					this.fastOrderCode = data
				}catch(e){
					this.util.message(e.msg, 3)
				}
				
				try{
					let {data} = await this.util.request({
						'url': this.api.returnCode,
						data:{ident:'dmf',page:'yb_wm/shop/in/dmf'} //当面付
					})
					this.dmfCode = data
				}catch(e){
					this.util.message(e.msg, 3)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.bg{
		position: absolute;
		top: -250rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 1000rpx;
		height: 600rpx;
		border-radius: 50%;
		z-index: -1;
	}
	.main-store{
		width: 700rpx;
		height: 500rpx;
		border-radius: 20rpx;
		margin: 60rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	.cards{
		display: flex;
		justify-content: space-between;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	.check-img{
		font-size: 24rpx;
		font-weight: bold;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}
	.center{
		width: 400rpx;
		height: 400rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
